<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HIS hospital info</title>

    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
    <div id="id_clinicRP">
        <div id="main_layout" class="easyui-layout" style="width:100%;height:100%;">
            <div data-options="region:'east',title:'',split:false,border:true" style="width:450px;">
                <div id="id_east" class="easyui-panel" style="width:100%" title="  ">
                    <form id="ff">
                        <table>
                            <tr>
                                <td>诊断:</td>
                                <td>11111</td>
                                <td colspan="2"><input type="checkbox"/>匹配药品</td>
                            </tr>
                            <tr>
                                <td>xxxx:</td>
                                <td>11111</td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div data-options="region:'center',title:'',border:true">
                <div id="id_center"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var his = {};
//his.rgnum = 0;
$(function(){
    // 让panel组件适应当前窗口的宽度和高度.
    var body_w = $('body').width();
    var client_h = document.documentElement.clientHeight;

    $('#id_clinicRP').panel({
        width: (body_w-30),
        height: (client_h-45),
        closable: true,
        title: '门诊处方'
    });
    //
    var test_data = [
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'},
        {code:'xxx',name:'xxx',price:'xxx'}
    ];
    //
    var strid = addRecipeGroup('处方1', test_data);
    addRecipeGroup('处方2', test_data);
    addRecipeGroup('处方3', test_data);
    addRecipeGroup('处方4', test_data);
    //修改datagrid标题的方法.
    //$('#'+strid).datagrid('getPanel').panel('setTitle', '修改后的title');
    //
    optEastPanel();
});
//添加一个处方组合.
function addRecipeGroup(){
    var args = arguments;
    //datagrid的标题为传入的第一个参数.
    var dg_title = args[0];
    //第二个参数为datagrid的column数据.
    var _data = args[1];
    //每次调用都增1的id种子.
    var rg = his.rgnum = his.rgnum+1 || 1;
    var strid = "id_dg0" + rg;
    var tpl = '<div id="{1}"></div>';
    $('#id_center').append( tpl.replace('{1}', strid) );
    $('#'+strid).datagrid({
        title: dg_title,
        singleSelect: true,
        columns:[[
            {field:'code',title:'Code',width:100},
            {field:'name',title:'Name',width:100},
            {field:'price',title:'Price',width:100,align:'right'}
        ]],
        data: _data
    });
    //将新添加的datagrid的ID返回.
    return strid;
}
//
function optEastPanel(){
    // $('#id_east').panel();
//    $('#id_east').css('width', '100%');
//    $.parser.parse('#id_east');
}
</script>
</html>